<template>
    <div>
        <el-page-header @back="router.push('/')" class="pageHeader">
            <template #content>
                <span class="text-large font-600 mr-3"> 考试了 </span>
            </template>
        </el-page-header>
        <main class="content" v-if="examData.length">
            <h2>{{ i + 1 }}. {{ examData[i].title }}</h2>
            <br />
            <el-radio-group v-model="radio" class="select" :disabled="visibleResult">
                <el-radio label="a" size="large" class="item">A. {{ examData[i].a }}</el-radio>
                <el-radio label="b" size="large" class="item">B. {{ examData[i].b }}</el-radio>
                <el-radio label="c" size="large" class="item">C. {{ examData[i].c }}</el-radio>
                <el-radio label="d" size="large" class="item">D. {{ examData[i].d }}</el-radio>
            </el-radio-group>
        </main>

        <div class="footer" v-if="examData.length">
            <div class="footer-btn">
                <el-popover placement="top" title="题目列表" :width="350" trigger="click">
                    <template #reference>
                        <el-icon class="list-icon">
                            <Grid />
                        </el-icon>
                    </template>
                    <ul>
                        <li v-for="(item, index) in examData" :key="item" @click="goItem(index)"
                            :class="itemStyle(item, index)">
                            {{ index + 1 }}</li>
                    </ul>
                </el-popover>
                <el-button @click="submit">确认选择</el-button>
                <el-button @click="end">交卷</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
// import choiseData from "@/mock/choise";
import { useRouter } from "vue-router";
import axios from 'axios'

const examData: any = ref([]);

const router = useRouter();

const total = ref(40)
const i = ref(0);
const visibleResult = ref(false);
const radio = ref("");
const fraction = ref(0);

const itemStyle = (item: any, index: number) => ({ active: i.value === index, answer: item.answer })


const choiseData: any = ref([{
    title: '',
    a: '',
    b: '',
    c: '',
    d: '',
    yes: '',
}])

const refresh = () => {
    const url = 'https://hyl999.co:7777'
    return axios.get(url + '/answer/query').then(res => {
        choiseData.value = res.data.data

    })
}

onMounted(() => {
    refresh().then(() => {

        const getExamData = () => {
            const num = Math.floor(Math.random() * choiseData.value.length);
            const data = examData.value.map((item: any) => item.title)

            if (!data.includes(choiseData.value[num].title)) {

                examData.value.push({ ...choiseData.value[num], answer: "" });
            } else {
                getExamData();
            }
        };
        for (let i = 0; i < total.value; i++) {
            getExamData();
        }
    })
})



const goItem = (index: number) => {
    i.value = index
};

const submit = () => {
    if (!radio.value) return ElMessage.error('请选择')
    examData.value[i.value].answer = radio.value
    if (i.value + 1 < total.value) i.value++
};

const end = () => {
    ElMessageBox.confirm("确认交卷吗?", "Warning", {
        confirmButtonText: "确定了",
        cancelButtonText: "不确定，再看看",
        type: "warning",
    }).then(() => {
        if (examData.value.find((item: any) => !item.answer)) return ElMessage.error('还有题没做完')
        examData.value.forEach((item: any) => {
            if (item.answer === item.yes) {
                fraction.value += 2
                item.error = false
            } else {
                item.error = true
            }
        })

        const errorData = examData.value.filter((v: any) => v.error)
        console.log(errorData)

        const getErrorData = localStorage.getItem('errorData') ? JSON.parse(localStorage.getItem('errorData')!) : []
        localStorage.setItem('errorData', JSON.stringify([...new Set([...errorData, ...getErrorData])]))

        let html = ''
        errorData.forEach((v: any) => {
            html += `<li>
                    <b style="margin-bottom:10px">${v.title}</b>
                    <ol type="A"  style="padding-left:15px">
                        <li>${v.a}</li>
                        <li>${v.b}</li>
                        <li>${v.c}</li>
                        <li>${v.d}</li>
                    </ol>
                    <div>我的答案：${v.answer}</div>
                    <div style="color:red">正确答案：${v.yes}</div>
                    </li><br/>`
        })

        ElMessageBox.alert(
            `
            <h2 style="font-weight:bold">总题数：${total.value}道</h2>
            <h2 style="padding-bottom:10px;font-weight:bold">正确：${fraction.value / 2}道</h2>
            <h2 style="font-weight:bold">总分：${total.value * 2}</h2>
            <h2 style="padding-bottom:10px;font-weight:bold">得分：${fraction.value}</h2>
            <hr/>
            <h3 style="padding-top:10px;font-weight:bold">错题信息(已收录到错题集)：</h3>
            <ol style="padding-left:15px">
                ${html}
            </ol>
            `,
            '考试结果',
            {
                dangerouslyUseHTMLString: true,
                customStyle: { maxWidth: '70vw', padding: '10px' }
            }
        )
    });

}

watch(i, (newi) => {
    radio.value = examData.value[newi].answer

})

</script>

<style lang="less" scoped>
ul {
    margin-top: 20px;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-around;
}

li {
    list-style: none;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #000;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-left: 10px;

    &:hover {
        cursor: pointer;
        color: #000;
        background-color: rgb(209, 103, 103);
    }

}

.active {
    color: #000;
    background-color: rgb(209, 103, 103) !important;
}

.answer {
    color: #000;
    background-color: aquamarine;
}

.item {
    width: 100%;
    text-align: center;
    margin: 0 auto;
}

.result {
    margin: 10px 0;

    .yes {
        font-weight: bold;
        color: rgb(31, 146, 108);
    }

    .error {
        font-weight: bold;
        color: rgb(224, 25, 18);
    }
}

.pageHeader {
    padding: 15px;
}

.content {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    padding: 20px;
    text-align: center;
}

.footer {
    width: 100%;
    margin-top: 20px;

    padding: 10px;
    padding-bottom: 30px;
    position: fixed;
    bottom: 0;
    right: 0;

    text-align: center;

    .footerbtn {
        display: flex;
    }
}

.list-icon {
    font-size: 30px;
    vertical-align: middle;
    margin-right: 20px;

    &:hover {
        cursor: pointer;
        color: aquamarine;
    }
}
</style>
